<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <#assign base=request.contextPath  />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>login</title>
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css">
    <script type="text/javascript" src="${base}/frame/layui/layui.all.js"></script>
    <!--必要样式-->
    <script src="${base}/backstage/js/jquery.min.js"></script>
    <script type="text/javascript" src="${base}/frame/layui/layui.js"></script>


</head>
<body>
<div class="container demo-1"  >
    <div id="large-header" class="large-header">
        <canvas id="demo-canvas"></canvas>
        <div class="logo_box" >
            <div style="padding-right: 30px">
            <h3>找回密码</h3>
            </div>
            <div style="padding-left: 90px">


            <div style="width:200px">
<#--                <label class="layui-form-label">* 手机号码：</label>-->
                <input  id="phoneNumber" name="phone" lay-verify="required phone" placeholder="请输入已绑定的手机号码" autocomplete="off" class="layui-input">
            </div>

            <br>
                <div overflow="hidden" style="width:2000px">

                <div style="float: left"><a type="button" id="moBtn" onclick="sendCode()" style="width: 100px" class="layui-btn layui-btn-sm layui-btn-warm">发送验证码</a> </div>

                <div style="float: left"><a type="button" id="secondShow" style="display: none "  class="layui-btn layui-btn-sm layui-btn-warm" ></a></div>



                <div style="width:100px ; float: left">
<#--                <label class="layui-form-label">* 验证码：</label>-->
                <input  name="code" float:left id="code"  lay-verify="required" placeholder="短信验证码" autocomplete="off" class="layui-input">
                 </div>

                </div>
                <br><br>
                <br>
            <div style="width:200px">
<#--                <label class="layui-form-label">* 新密码：</label>-->
                <input  id="pass" name="pass"  type="password" lay-verify="required" placeholder="新密码" autocomplete="off" class="layui-input">
            </div>

            <br>


                <div>
                    <button class="layui-btn" type="button" onclick="resetPass()">确认</button>
                    <button class="layui-btn" type="button" onclick="goback()" style="margin-left:68px">返回</button>
                </div>


            </div>


        </div>
    </div>
</div>

<script>
    goback = function(){

        window.history.back(-1);
    }
    //监听发送验证码
    sendCode =  function() {
        var phone=$("#phoneNumber").val();
        if(phone != null && phone != ""){
            if(!(/^1[34578]\d{9}$/.test(phone))){
                layer.msg("发送失败，手机号码格式错误");
                return false;
            }
            var countdown=59;  // 时长 s
            $("#secondShow").css('display','block');
            $("#moBtn").css('display','none');
            $("#secondShow").html('重新发送('+countdown+'s)');
            var timer = setInterval(function () {
                if (countdown == 0) {
                    clearInterval(timer);
                    $("#secondShow").css('display','none');
                    $("#moBtn").css('display','block');
                    countdown = 10;
                    console.log(countdown);
                }
                $("#secondShow").html('重新发送('+(countdown-1)+'s)');

                countdown--;
            }, 1000);


            $.ajax({
                type:"POST",
                async:false,
                url:"${base}/forget/sendCaptcha",
                data:{phone:phone},
                success:function(data){

                    if(data.code==0){
                        layer.msg("验证码已发送");
                    }else{
                        layer.msg("验证码发送失败");
                    }
                }

            });
        }else{
            layer.msg("请先输入手机号");
            return false;
        }

    }
</script>
<script>

    function resetPass() {
        var phone=$("#phoneNumber").val();
        var code=$("#code").val();
        var pass=$("#pass").val();

            if(phone!=null&&phone!=""&&code!=null&&code!=""&&pass!=null&&pass!=""){
                $.ajax({
                    type:"POST",
                    url:"${base}/forget/resetPass",
                    data:{phone:phone , pass:pass , code:code},
                    success:function(data){
                        if(data.code==0){
                            layer.msg(data.msg);
                            window.history.back(-1);
                        }else if(data.code==1){
                            layer.msg(data.msg);
                        }
                    }
                });
            }else{
                layer.msg("必选项不能为空");
            }



    }

</script>
</body>
</html>